<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				position: relative;
				width: 200px;
				height: 200px;
				background-color: pink;
				left: -200px;
			}
			span{
				position: absolute;
				width: 40px;
				height: 40px;
				background-color: skyblue;
				right: -40px;
				top: 50%;
				margin-top: -20px;
				text-align: center;
				line-height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<span id="">
				出
			</span>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var box = document.getElementById('box')
			var timer1 = null;
			// box.onmouseover = function(){
			// 	clearInterval(timer1)
			// 	 timer1 = setInterval(function(){
			// 		if(box.offsetLeft == 0){
			// 			clearInterval(timer1)
			// 			return;
			// 		}else{
			// 			box.style.left  = box.offsetLeft + 1 + 'px'
			// 		}
			// 	},10)
			// }
			// box.onmouseout = function(){
			// 	clearInterval(timer1)
			// 	 timer1 = setInterval(function(){
			// 		if(box.offsetLeft == -200){
			// 			clearInterval(timer1)
			// 			return;
			// 		}else{
			// 			box.style.left  = box.offsetLeft - 1 + 'px';
			// 		}
			// 	},10)
			// }
		
			// 封装版
			box.onmouseover = function(){
				move(this,0)
			}
			box.onmouseout = function(){
				move(this,-200)
			}
			function move(obj,end){
				clearInterval(timer1)
				speed = end > obj.offsetLeft ?　1 : -1;
				timer1 = setInterval(function(){
					if(obj.offsetLeft == end){
						clearInterval(timer1)
						return;
					}else{
						obj.style.left  = obj.offsetLeft + speed + 'px';
					}
				},10)
			}
		
		
		
		}
	</script>
</html>
